<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WEB服务开发框架</title>
    <head th:replace="source::header"></head>
    <style>

        @keyframes hueRotate {
            100% {
                filter: hue-rotate(360deg);
            }
        }

        #heeder_right_content{
            background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);
            animation: hueRotate 20s infinite alternate;
        }
        .title_task_wrap span{
            margin-right: 14px;
            position: relative;
            display: inline-block;
            cursor: pointer;

        }
        .title_task_wrap span i{
            color:#FFFFFF;
            font-size: 25px;
        }
        .title_task_wrap span span{
            position:absolute;
            right:-6px;
            top:3px;
            font-size:12px;
            color:#fff;
        }



    </style>
</head>
<body>
<div id="layout" class="k_box_size" style="width: 100%;height: 100%;">

</div>
</body>
<script  type="application/javascript" th:inline="javascript">
    var  menuJson = [(${menuJson})];
    var  persionMENU = {
        id:'0000001',
        text: "个人工作",
        iconCls: 'fa-user',
        data:{id:'0000001',actived:true}
    };
    var tabObj ,navObj;
    function createNav(el){

        menuJson.unshift(persionMENU);
        navObj =  new $B.Nav(el,{
            style:'v' ,  //v 垂直风格，h水平风格
            datas:menuJson ,
            backgroundColor:"#545C64", //整体背景色
            fontColor:"#fff",//图标字体颜色
            hoverColor:"#34393B", //鼠标移动上来的选项背景色
            activedColor:"#fff",//激活选项的背景色
            actFontColor:"#8E9503",//激活状态的图标字体颜色
            click:function(e){
                var data = e.data;
                console.log(data);
                if(data.isLeaf){
                    var url;
                    var controller= data.controller;
                    if(controller.indexOf(".html") <= 0){
                        url = $B.getHttpHost(ctxPath) + controller +"/page/"+data.pageName;
                    }else{
                        url = $B.getHttpHost(ctxPath) + controller;
                    }
                    if(data.params !== ""){
                        url = url + "?"+data.params;
                    }
                    tabObj.add({
                            id: 'tab_'+data.id,
                            text: data.menuText,
                            iconCls:data.menuIconCss,
                            dataType:'iframe',
                            url:url,
                        }
                    );
                }else if(data.actived){
                    tabObj.activedById(data.id);
                }
            }
        });
    }
    function createTabs(el){
        var tabs = [{
            fixed:true,
            id: persionMENU.id,
            text:  persionMENU.text,
            iconCls: 'fa-user',
            height:'100%',
            url: $B.getHttpHost(ctxPath) + "board/page/board",
            dataType: 'iframe'
        }];
        tabObj =   new $B["Tabs"](el, {
            style: 'plain',  //plain简约风格，normal常规风格，card卡片风格
            headSize: '36px',
            reload:false,
            openTab:true,
            animate:true,
            ifrScroll:'auto',
            closeable:true,
            haverClose:true,
            reload: false,
            position: "top",
            headerStyle:{"border-bottom":"1px solid #58A9FF"},
            bodyStyle:undefined,
            bodyItemStyle:{ "border-top-left-radius":"28px", "border-top-right-radius":"28px","background-color":"#F0F5FA", "border-left":"solid #fff 14px","border-right":"solid #fff 14px","border-top":"solid #fff 10px" },
            onClick: function (id,text) {
                id = id.replace("tab_","");
                navObj.setActById(id);
            },
            onLoaded: function (opt, ifr) {
                if(opt.text === "个人工作"){
                    $B.Dom.css(ifr.parentNode,{ "border-top-left-radius":"0px", "border-top-right-radius":"0px"});
                }else{
                    $B.Dom.css(ifr.parentNode,{ "border-top-left-radius":"28px", "border-top-right-radius":"28px"});
                }
            },
            onClosed:function(delEl,actEl){
                console.log("on closed......",actEl);
                var id = actEl.id.replace("tab_","");
                navObj.setActById(id);
            },
            tabs: tabs
        });
    }
    function pageLoaded() {
        console.log($B);
        $B.Layout({
            el: "layout",
            top: {size: 35, css: {background: "#0F8DE9"}, overflow: "hidden"},
            left: {size: 200,  css: {background: "#0F8DE9"}, overflow: "diy",
                resizebar: {
                    iconColor: "#000",
                    backgroundColor: "#C9B9FF",
                    iconColorAct: "#FFF",
                    backgroundColorAct: "#8BCBF7"
                }},
            center: {css: {}, overflow: "hidden"},
            onRender:function (flag, el) {
                if(flag === "left")
                {
                    createNav(el);
                    return;
                }
                if (flag === "center") {
                    createTabs(el);
                    return;
                }
                if (flag == "top") {
                    let org = "";
                    if(loginOrg != ""){
                        org = "<span style='padding:0 2px 0px 0px;color:#fff;'>"+loginOrg + "</span>";
                    }
                    el.innerHTML = "<div class='k_box_size' id='heeder_right_content' style='border-left:200px solid #2374ff;position:absolute;height:100%;top:0;left:0;width:100%;'></div><div class='k_box_size' style='position:absolute;height:100%;top:0;left:0;width:200px;'><h5 id='layout_h5_logo'><i class='fa fa-share-2'></i><span >work contact</span></span></h5></div>";
                    var $tile = el.firstChild;

                    var $r = $B.DomUtils.append($tile,"<span style='position:absolute;top:0;right:10px;line-height:35px;color:#fff'><span style='cursor:pointer;padding-left:12px;padding-right: 12px;'  id='btn_luser'><i style='color:#fff' class='fa fa-user'></i></span>"+org +" "+loginUser +"("+loginAccout+")<span id='btn_logout' style='padding-left:12px;cursor: pointer;'><i  style='color:#fff' class='fa  fa-logout-1'></i></span></div>");
                    var $logout = $B.DomUtils.findbyId($r,"btn_logout");
                    $B.mouseTip($logout,"退出系统！","bottom");
                    $B.DomUtils.click($logout,function () {
                        $B.confirm({
                                content:"请您确认退出？",
                                okFn:function(){//确认回调
                                    $B.request({
                                        url: $B.getHttpHost(ctxPath) + "v1/logout",
                                        ok: function (msg, data) {
                                            $B.busyTip({
                                                closeable: true, //是否关闭
                                                title:'正在处理中，请稍等.....'
                                            });
                                            window.location.href = $B.getHttpHost(ctxPath) + "v1/page/login";
                                        }
                                    });
                                }
                            });
                    });

                    var $btnUser = $B.DomUtils.findbyId($r,"btn_luser");
                    $B.mouseTip($btnUser,"修改密码及个人信息！","bottom");
                    $B.DomUtils.click($btnUser,()=>{
                    window._$infoWin =   $B.window({
                            title:'修改个人信息',
                            width:620,
                            height:360,
                            dataType:'html',
                            closeable:false,
                            fixed:true,
                            iconCls: 'fa-user',
                            url: $B.getHttpHost(ctxPath) + "public/page/info?id="+loginUserId,
                            onClosed:function () {
                                window._$infoWin = undefined;
                            }
                        });
                    });

                    //工作任务代办提示
                    var $task = $B.Dom.createEl("<span class='title_task_wrap'><span id='task_major'><span class='k_font_blink'>10</span><i class='fa fa-comment-empty'></i></span><span id='task_timeout'><span>10</span><i class='fa fa-comment-empty'></i></span><span><span id='task_comoon'>10</span><i class='fa fa-comment-empty'></i></span></span>");
                    $B.Dom.prepend($r,$task);
                    var $comm = $B.Dom.findbyId($task,"task_comoon");
                    $B.mouseTip($comm,"一般任务！","bottom","#2439FF");
                    var $major = $B.Dom.findbyId($task,"task_major");
                    $B.mouseTip($major,"加急任务！","bottom","#C42CF2");
                    var $timeout = $B.Dom.findbyId($task,"task_timeout");
                    $B.mouseTip( $timeout,"超时任务！","bottom","#B7AA08");
                }
             }
        }) ;
    }

    $B.DomUtils.onDomLoaded(function () {
        pageLoaded();

    });
</script>
</html>